{% extends 'base.html' %}
{% block head %}
	<link href="{{ path }}js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
	<link href="{{ path }}js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet"> 
    
    <script src="{{ path }}js/demos/demo.tables.js"></script>
    <script src="{{ path }}js/plugins/datatables/jquery.dataTables.js"></script>
    <script src="{{ path }}js/plugins/datatables/DT_bootstrap.js"></script>
	<script src="{{ path }}js/plugins/responsive-tables/responsive-tables.js"></script>

{% endblock %}
	
{% block javascript %}
function OnSubmitForm(){
	if(document.pressed == 'Exportar'){
		document.frm_cartera.action ="/cartera/exportar/";
		document.frm_cartera.target = "_blank";
		return true;
	}
    
    else if(document.pressed == 'Reporte'){
		document.frm_cartera.action ="/cartera/reporte/";
		document.frm_cartera.target = "_blank";
		return true;
	}
    
    else{
    	return false;
    }
}


{% endblock %}



{% block jquery %}	
	$("#facultad").change(function () {
		$('#semestre').find('option').remove().end();
		$("#facultad option:selected").each(function () {
			semestres = $(this).attr("semestres") + " ";
		});
         
        for(i=0; i<=semestres; i++){
            $('#semestre').append($('<option></option>').attr('value', (i) ).text((i)));
        }
		
	});
        
	
    function buscar() {
    	texto = $('#texto').attr('value');
        periodo = $('#periodo').attr('value');
        facultad = $('#facultad').attr('value');
        semestre = $('#semestre').attr('value');
        $.ajax({
            url: "/cartera/resultados/",
            type: "POST",
            data : {texto:texto, 
            		periodo:periodo, 
                    facultad:facultad, 
                    semestre:semestre,
                    csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                     },
            dataType: "html",
            success: function(datos) {
            	$('#resultados').html(datos);
            }
        });
	}
	        
	
	$("#btn_buscar").click(buscar);
    
    $( '#btn_pagar' ).click(function() {
        if($('#pago_id').attr('value') != 0){
            pago_id = $('#pago_id').attr('value');
            estudiante_id = $('#id_estudiante').attr('value');
            pagado = $('#pagado').attr('value');
            pagoobs = $('#pagoobs').attr('value');
            $.ajax({
                url: "/cartera/estudiantes/pago/guardar/",
                type: "POST",
                data : {pago_id:pago_id, 
                        pagado:pagado, 
                        pagoobs:pagoobs,
                        csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                         },
                dataType: "html",
                success: function(datos) {
                    buscar();
                    cargarHistorial(datos);
                }
            });
        }
        else{
            alert("Debe crear primero el estudiante.");
        }
        
    });
    
    
    function cargarHistorial(matricula_id){
        $.ajax({
                url: "/cartera/estudiantes/historial/",
                type: "POST",
                data : {matricula_id:matricula_id,
                        csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                         },
                dataType: "html",
                success: function(datos) {
                    $('#historial').html(datos);
                    $('#facultad').attr('value', 0);
                    $('#periodo').attr('value', 0);
                    $('#semestre').attr('value', 0);
                    $('#valor-credito').attr('value', 0);
                    $('#cuotas').attr('value', 0);
                }
            });
    }
    
{% endblock %}

{% block ruta %}

{% endblock %}

{% block contenido %}
	{{ request.session.control }}
    <div class="span12">	
        <div id="horizontal" class="widget widget-form">
            <div class="widget-header">
                <h3>Listado de Estudiantes</h3>	      				
            </div> <!-- /.widget-header -->
            
            <div class="widget-content">
            	<!--<div class="form-horizontal">
                <div id="csrf_token">{% csrf_token %}</div>-->
                <form name="frm_cartera" id="frm_cartera" class="form-horizontal" onsubmit="return OnSubmitForm();" method="post">
                    <div id="csrf_token">{% csrf_token %}</div>
                    <fieldset>
                        <table width="100%">
                            <tr><td width="50%">
                                <div class="control-group">
                                    <label class="control-label" for="input01">Nombre o Identificación:</label>
                                    <div class="controls">
                                        <input type="search" class="input-large" autofocus name="texto" id="texto" size="65" placeholder="Estudiante a buscar"/>
                                    </div>
                                </div>
                            </td>
                            <td  width="50%">
                                <div class="control-group">
                                    <label class="control-label" for="input01">Facultad:</label>
                                    <div class="controls">
                                        <select name="facultad" id="facultad" class="input-large">
	                                        <option semestres="0" value="0">NINGUNA</option>
                                            {% for facultad in Facultades %}
                                                <option semestres="{{ facultad.semestres }}" value="{{ facultad.id }}">{{ facultad.sigla }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td></tr>
                            <tr><td>
                                <div class="control-group">
                                    <label class="control-label" for="input02">Periodo:</label>
                                    <div class="controls">
                                        <select name="periodo" id="periodo" class="input-large">
                                            <option value="0">TODOS</option>
                                            {% for periodo in Periodos %}
                                                <option value="{{ periodo.id }}">{{ periodo.nombre }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>    
                                <div class="control-group">
                                    <label class="control-label" for="input01">Semestre:</label>
                                    <div class="controls">
                                        <select name="semestre" id="semestre" class="input-large" >
                                            <option value="0">0</option>
                                        </select>
                                    </div>
                                </div>
                            </td></tr>
                            </table>
                    		<table width="100%" class="form-actions">
                                <tr>
                                	<td width="50%" style="text-align:center">
                                    	<button type="submit" class="btn btn-primary btn-large" id="btn_buscar" onclick="document.pressed=this.value" value="Buscar">Buscar</button>
                                    </td>
                                	<td width="50%" style="text-align:center">
                                    	<button type="submit" class="btn btn-primary btn-large" id="btn_reporte" onclick="document.pressed=this.value" value="Reporte">Reporte</button>
                                        <button type="submit" class="btn btn-primary btn-large" id="btn_exportar" onclick="document.pressed=this.value" value="Exportar">Exportar</button>
                                    </td>
                                </tr>
                            </table>
                    <!--</div>-->
                    </fieldset>
                                        
                </form>
            </div>
        </div> <!-- /.widget-content -->    
        </div>  <!-- /.span 12 -->
    </div>  <!-- /.widget -->
    <div id="resultados">
		
    </div>
    

<!-- HISTORIAL DE PAGOS -->
<div class="modal fade hide" id="modalHistorial">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Historial de pagos</h3>
  </div>
    <div id="historial" class="modal-body">
                    
    </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
    <a href="#" class="btn btn-primary">Ver historial</a>
  </div>
</div>
<!-- /modalHistorial -->
    
    
<!-- INTERFAZ DE PAGOS -->
<div class="modal fade hide" id="modalPagar">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Pagar cuota</h3>
  </div>
  	<form id="form-pagar" class="form-horizontal">
    	<fieldset>
		<div id="pagar" class="modal-body">
                        
		</div>
        </fieldset>
	</form>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
    <a href="#" id="btn_pagar" data-dismiss="modal" class="btn btn-primary">Guardar pago</a>
  </div>
</div>
<!-- /modalPagar -->

{% endblock %}